{% extends "./inc/base.html" %}
{% block style%}
<link rel="stylesheet" href="/static/admin/js/datepicker/bootstrap-datetimepicker.min.css" type="text/css">
<link rel="stylesheet" href="/static/admin/js/jOrgChart/jquery.jOrgChart.css"/>
{% endblock %}
{% block content %}
<style>
.jOrgChart{
    position: relative;
    overflow: auto;
    width: 100%;
}
.jOrgChart table{
    margin: auto;
}
</style>
    <section class="hbox stretch">
    <section class="vbox">
            <div id="globalTree" style="width:100%; height:100%;position: absolute; top:0; left:0;"></div>
            <!-- //<div id="globalTree" style="width: 800px;height: 700px;margin:0 auto"></div> -->
    </section>
    </section>
{% endblock%}

{% block script%}
 <!-- ECharts单文件引入 -->
 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
 <script type="text/javascript">
  var treeData = [];
var myGlobalTreeChart;
var treeNodePadding = 90; //节点间最小间隔
var treeTopPadding = 120; //tree距顶端的距离
$(function() {
    showTreeDetail();
    window.onresize = function(){
    	myGlobalTreeChart.resize();
    };
});

function getGlobalTreeOption() {
    var option = {
        backgroundColor: 'rgba(8,24,42,0.8)',
        title: {
            show:false,
            text: '拓扑图',
            textStyle: {
                color: 'white'
            },
            x: 'center',
            y: 'top'
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                var name = params.data.tooltipName;
                var nodeType = params.data.nodeType;
                var elecCurrent = params.data.elecCurrent;
                var currentInfo = elecCurrent ? elecCurrent.replace(/\n/g, '<br>&emsp;') : "";
                return params.data.nodeTypeName + " : " + (name ? name : "") + (nodeType == 1 ? "" : "<br>" + currentInfo);
            },
            show:false,
            hideDelay: 0,
            position: function(p) {
                return [p[0], p[1] - 8];
            }
        },
        toolbox: {
            show: false
        },
        calculable: false,
        series: [{
            name: '',
            type: 'tree',
            orient: 'vertical', // vertical horizontal
            rootLocation: {
                x:'center',
                y: treeTopPadding
            },
            roam: true, //是否可拖动、缩放
            nodePadding: treeNodePadding,
            symbol: 'circle',
            symbolSize: 40,
            itemStyle: {
               
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'white',
                            fontSize: 15,
                            fontWeight: 'bolder'
                        }
                    },
                    lineStyle: {
                        color: 'white',
                        width: 1,
                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                    }
                },
                emphasis: {
                    label: {
                        show: false
                    }
                }
            },
            data: treeData
        }],
        noDataLoadingOption: {
            text: '暂无数据...',
            effect: 'bubble',
            effectOption: {
                backgroundColor: 'rgba(8,24,42,0.8)',
                effect: {
                    n: 0
                }
            },
            textStyle: {
                color: '#fff'
            }
        },
    };
    return option;
}

function showTreeDetail() {
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(['echarts', 'echarts/chart/tree'], function(ec) {
    	myGlobalTreeChart = ec.init($("#globalTree")[0]);
        requestDataAndDoGlobalTree(ec);
    });
}

function requestDataAndDoGlobalTree(ec) {
	var str = '{"meterBoxNum":37,"meterBoxSymbolSize":25,"data":{{orgData|safe}}}';
	var data = JSON.parse(str);
    treeData=data.data;
    doGlobalTreeChart(ec,data);
}

function doGlobalTreeChart(ec,data) {
    myGlobalTreeChart.setOption(getGlobalTreeOption());
    //生成图表后做调整
   	adjustTreeView(data);
}

function adjustTreeView(data) {
	var meterBoxNum = data.meterBoxNum;
    var meterBoxSymbolSize = data.meterBoxSymbolSize;

	var zr = myGlobalTreeChart.getZrender();
	// console.log(zr);
	var domWidth = zr.painter.getWidth();
	var treeWidth = getTreeWidth(zr);
	var adjustSize = domWidth / treeWidth * 0.9; //缩放到dom宽度的0.9倍
	var lastNodeX = zr.storage._roots[zr.storage._shapeListOffset - 1].style.x * adjustSize; //预算调整后最后一个节点距root节点的x方向偏移量
	var rightOffset = domWidth - lastNodeX - (domWidth - treeWidth * adjustSize)/2; //计算需要右移多少，并且尽量保持整体居中
	// console.log(adjustSize);
	// console.log('lastNodeX: ' + lastNodeX + '      off2R: ' + rightOffset);
	zr.painter._layers[1].scale = [ adjustSize, adjustSize, 0, 0 ]; //前两个值为x、y方向缩放比例，后两个为缩放原点，详情见zrender API
	zr.painter._layers[1].position = [rightOffset, treeTopPadding ]; //偏移量

	myGlobalTreeChart.refresh();
}

function getTreeWidth(zr) {
	var nodes = zr.storage._roots;
	var max = zr.storage._roots[nodes.length - 1].style.x;
	var min = 0;
	for(var i=0; i < nodes.length; i++){
		if(nodes[i].type = 'icon'){
			if(nodes[i].style.x < min)
				min = nodes[i].style.x;
		}
	}
	return  max - min;
}
 </script>
{% endblock %}
